{% extends "base.html" %}
{% if board.bo_use_sideview %}
    {% import "/sideview/macros.html" as sideview %}
{% endif %}

{% block head %}
    <script src="/static/js/viewimageresize.js"></script>
    <link rel="stylesheet" href="{{ theme_asset(request, 'css/board_common.css?ver=1.0.0') }}">
    <link rel="stylesheet" href="{{ theme_asset(request, 'css/board_skin_gallery.css?ver=1.0.0') }}">
{% endblock head %}

{% block title %}{{ write.wr_subject|truncate(20, False, '...', 0) }} > {{ board.subject }}{% endblock title %}
{% block subtitle %}{{ board.subject }}{% endblock subtitle %}

{% block content %}
{% set board_config=board_config(request, board) %}
{% set login_member=request.state.login_member %}
{% set is_admin=get_admin_type(request, login_member.mb_id, board=board) %}
{% set bo_table_width=board.bo_table_width if board.bo_table_width > 0 else 100 %}
<div id="bo_gallery_view" class="bo_common bo_view" style="width:{{ bo_table_width }}{% if bo_table_width <= 100 %}%{% else %}px{% endif %}">

    <h2 id="view_subject">
        {% if board.bo_use_category and write.ca_name %}
        <span class="subject_cate">{{ write.ca_name }}</span>
        {% endif %}
        {{ write.wr_subject|truncate(250, False, '...', 0) }}
    </h2>

    <div id="view_header">
        <h2 class="blind">页面信息</h2>

        <div class="header_profile_img">
            <img src="{{ get_member_image(write.mb_id) }}" alt="">
        </div>

        <div class="header_info">

            <div>
                <span class="blind">按作者</span>
                <strong>
                    {% if board.bo_use_sideview %}
                        {{ sideview.get(request, write.mb_id, write.name, write.wr_email, write.wr_homepage)|safe }}
                    {% else %}
                        <span class="{% if write.mb_id %}member{% else %}guest{% endif %}">
                            {{ write.name }}
                        </span>
                    {% endif %}
                    {% if write.ip %}
                        ({{ write.ip }})
                    {% endif %}
                </strong>
            </div>

            <div>
                <i class="blind">评论</i>
                <span><a href="#bo_basic_comment"> <i class="fa fa-regular fa-commenting" aria-hidden="true"></i> {{ write.wr_comment|number_format }}枪</a></span>

                <i class="blind">询价</i>
                <span><i class="fa fa-eye" aria-hidden="true"></i> {{ write.wr_hit|number_format }}sashy</span>

                <i class="blind">写作日</i>
                <span class="info_date"><i class="fa fa-regular fa-clock" aria-hidden="true"></i> {{ write.wr_datetime|datetime_format }}</span>
            </div>

        </div>

        <ul class="view_buttons">
            <li>
                <a href="{{ url_for('list_post', bo_table=board.bo_table)|set_query_params(request) }}" class="btn_b01 btn" title="列表">
                    <i class="fa fa-list" aria-hidden="true"></i><span class="blind">列表</span>
                </a>
            </li>
            {% if is_reply %}
            <li>
                <a href="{{ url_for('write_form_add', bo_table=board.bo_table)|set_query_params(request, parent_id=write.wr_id) }}" class="btn_b01 btn" title="答案">
                    <i class="fa fa-reply" aria-hidden="true"></i><span class="blind">答案</span>
                </a>
            </li>
            {% endif %}
            {% if is_write %}
            <li>
                <a href="{{ url_for('write_form_add', bo_table=board.bo_table)|set_query_params(request) }}" class="btn_b01 btn" title="写作">
                    <i class="fa fa-pencil" aria-hidden="true"></i><span class="blind">写作</span>
                </a>
            </li>
            {% endif %}
            {% if is_admin or write.mb_id == login_member.mb_id or not write.mb_id %}
            <li class="buttons_more">
                <button type="button" class="more_opener btn_b01 btn">
                    <i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="blind">公告板列表选项</span>
                </button>
                <ul class="more">
                    <li>
                        <a href="{{ url_for('write_form_edit', bo_table=board.bo_table, wr_id=write.wr_id)|set_query_params(request) }}">
                            校正<i class="fa fa-pen-to-square" aria-hidden="true"></i>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('delete_post', bo_table=board.bo_table, wr_id=write.wr_id)|set_query_params(request) }}" onclick="del(this.href); return false;">
                            删除<i class="fa fa-regular fa-trash-can" aria-hidden="true"></i>
                        </a>
                    </li>
                    {% if is_admin %}
                    <li>
                        <a href="#" onclick="board_move(this.href, 'copy'); return false;">
                            复制<i class="fa fa-regular fa-file" aria-hidden="true"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="board_move(this.href, 'move'); return false;">
                            移动<i class="fa fa-arrows" aria-hidden="true"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul> 
            </li>
            {% endif %}
        </ul>
        <script>
            jQuery(function($){
                $(".buttons_more .more_opener").on("click", function(e) {
                    e.stopPropagation();
                    $(this).next(".more").toggle();
                })
                $(document).on("click", function (e) {
                    if(!$(e.target).closest(".more_opener").length) {
                        $(".buttons_more .more").hide();
                    }
                });
            });
        </script>

    </div>

    <div id="view_article">
        <h2 class="blind">文本</h2>

        <div id="article_share">
            <!-- SNS START -->
            <!-- SNS END -->
            {% if login_member %}
                <a href="{{ url_for('scrap_form', bo_table=board.bo_table, wr_id=write.wr_id) }}" target="_blank" class="btn btn_b03" onclick="win_scrap(this.href); return false;">
                    <i class="fa fa-bookmark" aria-hidden="true"></i> 废料
                </a>
            {% endif %}
        </div>

        <div id="article_img">
        {% for image in images %}
            <a href="/{{ image.bf_file }}" target="_blank" class="view_image">
                <img src="/{{ image.bf_file }}" width="{{ board_config.image_width }}" alt="" title="">
            </a>
        {% endfor %}
        </div>

        <div id="article_contents" class="{{ request.state.editor }}">
            {{ write.wr_content|set_image_width(board_config.image_width)|url_auto_link(request)|safe }}
        </div>

        {{ board_config.get_member_signature(write.mb_id) }}

        {% if board.bo_use_good or board.bo_use_nogood %}
        <div id="article_react">
            {% if board.bo_use_good %}
            <div>
                <a href="/bbs/ajax/good/{{ board.bo_table }}/{{ write.wr_id }}/good" id="react_good" class="btn_react react_good {{ "active" if write.is_good else "" }}">
                    <i class="fa fa-regular fa-thumbs-up" aria-hidden="true"></i>
                    <span class="blind">待定</span>
                    <strong>{{ write.wr_good }}</strong>
                </a>
                <b class="react_msg good"></b>
            </div>
            {% endif %}
            {% if board.bo_use_nogood %}
            <div>
                <a href="/bbs/ajax/good/{{ board.bo_table }}/{{ write.wr_id }}/nogood" id="react_nogood" class="btn_react react_nogood {{ "active" if write.is_nogood else "" }}">
                    <i class="fa fa-regular fa-thumbs-down" aria-hidden="true"></i>
                    <span class="blind">非推荐</span>
                    <strong>{{ write.wr_nogood }}</strong>
                </a>
                <b class="react_msg nogood"></b>
            </div>
            {% endif %}
        </div>
        {% endif %}

    </div>

    {% if files %}
    <div id="view_file" class="view_filelink">
        <h2 class="blind">附件</h2>
        <ul>
        {% for file in files %}
            <li>
                <i class="fa fa-download" aria-hidden="true"></i>
                <div>
                    <a href="/board/{{ board.bo_table }}/{{ write.wr_id }}/download/{{ file.bf_no }}" class="view_file_download">
                        <strong>{{ file.bf_source }}</strong>
                        ({{ file.bf_filesize|filesizeformat }})
                    </a>
                    <div class="filelink_cnt">{{ file.bf_download }}下载剧集 | DATE : {{ file.bf_datetime|datetime_format }}</div>
                </div>
            </li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}

    {% if links %}
    <div id="view_link" class="view_filelink">
        <h2 class="blind">相关链接</h2>
        <ul>
            {% for link in links %}
            <li>
                <i class="fa fa-link" aria-hidden="true"></i>
                <div>
                    <a href="{{ url_for("link_url", bo_table=board.bo_table, wr_id=write.wr_id, no=link.no) }}" target="_blank">
                        <strong>{{ link.url|truncate(70, False, '...', 0) }}</strong>
                    </a>
                    <div class="filelink_cnt">{{ link.hit|number_format }}会议连接</div>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    {% if prev or next %}
    <div id="view_move">
        {% if prev %}
        <a href="{{ url_for('read_post', bo_table=board.bo_table, wr_id=prev.wr_id )|set_query_params(request) }}" class="prev">
            <i class="fa fa-chevron-left" aria-hidden="true"></i>
            <span class="label">上一篇文章</span>
            <span class="subject">{{ prev.wr_subject }}</span>
            <span class="date">{{ prev.wr_datetime|datetime_format }}</span>
        </a>
        {% else %}
        <div class="prev"></div>
        {% endif %}
        {% if next %}
        <a href="{{ url_for('read_post', bo_table=board.bo_table, wr_id=next.wr_id )|set_query_params(request) }}" class="next">
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
            <span class="label">下一篇文章</span>
            <span class="subject">{{ next.wr_subject }}</span>
            <span class="date">{{ next.wr_datetime|datetime_format }}</span>
        </a>
        {% else %}
        <div class="next"></div>
        {% endif %}
    </div>
    {% endif %}

    <button type="button" class="comment_opener">
        <span class="total"><b>评论</b> {{ comments|count|number_format }}</span>
        <i class="fa fa-angle-down"></i>
    </button>

    <div id="bo_basic_comment" class="bo_comment">
        <h2 class="blind">评论列表</h2>

        {% for comment in comments %}
        {% set reply_depth=comment.wr_comment_reply|length %}
        <div id="c_{{ comment.wr_id }}" class="comment {% if reply_depth %}comment_depth{{ reply_depth }}{% endif %}">

            <h3 class="blind">{{ comment.name }}来自你的评论</h3>

            {% if reply_depth %}
                <i class="fa fa-reply"></i>
                <span class="blind">评论大</span>
            {% endif %}

            <div class="comment_profile_img">
                <img src="{{ get_member_image(comment.mb_id) }}" alt="">
            </div>

            <div class="comment_contents">

                <div class="contents_info">
                    {% if board.bo_use_sideview %}
                        {{ sideview.get(request, comment.mb_id, comment.name, comment.wr_email, comment.wr_homepage)|safe }}
                    {% else %}
                        <span class="{% if comment.mb_id %}member{% else %}guest{% endif %}">
                            {{ comment.name }}
                        </span>
                    {% endif %}
                    {% if comment.ip %}
                        <span class="blind">iPi</span>
                        <span>({{ comment.ip }})</span>
                    {% endif %}

                    <span class="blind">写作日</span>
                    <span class="datetime">
                        <i class="fa fa-regular fa-clock" aria-hidden="true"></i>
                        <time datetime="{{ comment.wr_datetime|datetime_format }}">{{ comment.wr_datetime|datetime_format }}</time>
                    </span>
                </div>

                <div class="contents">
                    {% if comment.is_secret %}
                        <i class="fa fa-lock"></i>
                        <span class="blind">这是一个秘密评论.</span>
                    {% endif %}
                    {% if comment.is_secret_content %}
                        <a href="{{ url_for('password_page', action="comment-view", bo_table=board.bo_table, wr_id=comment.wr_id) }}" class="certify">
                            检查注释
                        </a>
                    {% else %}
                        {{ comment.wr_content|safe }}
                    {% endif %}

                    <div id="edit_{{ comment.wr_id }}" class="bo_comment_write"></div><!-- 校正 -->
                    <div id="reply_{{ comment.wr_id }}" class="bo_comment_write"></div><!-- 答案 -->
                </div>

            </div>

            <input type="hidden" value="{% if "secret" in comment.wr_option %}secret{% endif %}" id="secret_comment_{{ comment.wr_id }}">
            <textarea id="save_comment_{{ comment.wr_id }}" style="display:none">{{ comment.save_content|safe }}</textarea>

            <div class="buttons_more">
                <button type="button" class="more_opener btn_b01 btn">
                    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                    <span class="blind">注释选项</span>
                </button>
                <ul class="more">
                    {% if comment.is_reply %}
                    <li><button type="button" class="more_reply" data-wrid="{{ comment.wr_id }}">答案</button></li>
                    {% endif %}
                    {% if comment.is_edit %}
                    <li><button type="button" class="more_modify" data-wrid="{{ comment.wr_id }}">校正</button></li>
                    {% endif %}
                    {% if comment.is_del %}
                    <li><button type="button" class="more_delete" data-href="/board/delete_comment/{{ board.bo_table }}/{{ comment.wr_id }}">删除</button></li>
                    {% endif %}
                </ul>
            </div>
        </div>
        {% else %}
        <p class="empty">无注册评论.</p>
        {% endfor %}

        <script>
            $(function() {
                $(".more_reply").click(function() {
                    let $this = $(this);
                    let wrId = $this.data("wrid");

                    comment_box(wrId, "c");
                    $(this).closest(".more").hide();
                    return false;
                });

                $(".more_modify").click(function() {
                    let $this = $(this);
                    let wrId = $this.data("wrid");

                    comment_box(wrId, "cu");
                    $(this).closest(".more").hide();
                    return false;
                });

                $(".more_delete").click(function() {
                    let $this = $(this);
                    let href = $this.data("href");

                    comment_delete(href);
                    $this.closest(".more").hide();
                    return false;
                });

                $(document).mouseup(function (e){
                    var container = $(".more");
                    if( container.has(e.target).length === 0)
                    container.hide();
                });
            });
        </script>
    </div>

    {% if is_comment_write %}
    <div id="bo_basic_comment_write" class="bo_comment_write">
        <h2 class="blind">写评论</h2>

        <form name="fviewcomment" id="fviewcomment" method="post" autocomplete="off"
            action="{{ url_for('write_comment_update', bo_table=board.bo_table)|set_query_params(request) }}" 
            onsubmit="return fviewcomment_submit(this);">

            <input type="hidden" name="w" id="w" value="c">
            <input type="hidden" name="bo_table" value="{{ board.bo_table }}">
            <input type="hidden" name="wr_id" value="{{ write.wr_id }}">
            <input type="hidden" name="comment_id" value="{{ request.query_params.c_id }}" id="comment_id">
            <input type="hidden" name="sca" value="{{ request.query_params.sca }}">
            <input type="hidden" name="sfl" value="{{ request.query_params.sfl }}">
            <input type="hidden" name="stx" value="{{ request.query_params.stx }}">
            <input type="hidden" name="spt" value="{{ request.query_params.spt }}">
            <input type="hidden" name="page" value="{{ request.query_params.page }}">
            <input type="hidden" name="token" value="">

            <div class="write_writer">
                {% if not request.state.login_member %}
                <label for="wr_name" class="blind">姓名<strong> 必不可少的</strong></label>
                <input type="text" name="wr_name" value="" id="wr_name" required class="frm_input required" size="25" placeholder="姓名">
                <label for="wr_password" class="blind">密码<strong> 必不可少的</strong></label>
                <input type="password" name="wr_password" id="wr_password" required class="frm_input required" size="25"  placeholder="密码">
                <input type="password" name="wr_password" id="wr_password" required class="frm_input required" size="25"  placeholder="비밀번호">
                {% endif %}
            </div>

            <span class="blind">内容</span>
            <textarea id="wr_content" name="wr_content" maxlength="10000" required class="required"
                {% if board.bo_comment_min and board.bo_comment_max %}
                    onkeyup="check_byte('wr_content', 'length_count');"
                {% endif %}
                placeholder="请输入评论"></textarea>

            {% if board.bo_comment_min and board.bo_comment_max %}
            <script> check_byte("wr_content", "length_count"); </script>
            <strong id="contents_length"><span id="length_count">0</span>字母</strong>
            {% endif %}

            {% if not request.state.login_member %}
            <fieldset id="captcha" class="captcha">{% include captcha_widget(request) ignore missing %}</fieldset>
            {% endif %}

            <div class="btn_confirm">
                <div class="chk_box">
                    <input type="checkbox" name="wr_secret" value="secret" id="wr_secret">
                    <label for="wr_secret">
                        <span></span>秘密评论
                    </label>
                </div>

                <button type="button" id="btn_cancel" class="btn_cancel btn">取消</button>
                <button type="submit" id="btn_submit" class="btn_submit">注册评论</button>
            </div>

            <script>
            $(document).on("keyup change", "textarea#wr_content[maxlength]", function() {
                var str = $(this).val()
                var mx = parseInt($(this).attr("maxlength"))
                if (str.length > mx) {
                    $(this).val(str.substr(0, mx));
                    return false;
                }
            });
            </script>

        </form>
    </div>

    <script>
    var save_before = '';
    var save_html = document.getElementById('bo_basic_comment_write').innerHTML;

    // 有限的字符数
    var char_min = parseInt({{ board.bo_comment_min }}); // 最小值
    var char_max = parseInt({{ board.bo_comment_max }}); // 最大值

    function fviewcomment_submit(f)
    {
        // 为了摆脱这两个空间
        var pattern = /(^\s*)|(\s*$)/g; // \s 空格字符
        document.getElementById('wr_content').value = document.getElementById('wr_content').value.replace(pattern, "");
        if (char_min > 0 || char_max > 0)
        {
            check_byte('wr_content', 'length_count');
            var cnt = parseInt(document.getElementById('length_count').innerHTML);
            if (char_min > 0 && char_min > cnt) {
                alert("评论是 "+char_min+"你需要写更多的信。.");
                return false;
            } else if (char_max > 0 && char_max < cnt) {
                alert("评论是 "+char_max+"你需要写的比字母少。.");
                return false;
            }
        }
        else if (!document.getElementById('wr_content').value)
        {
            alert("请输入评论.");
            return false;
        }

        if (typeof(f.wr_name) != 'undefined')
        {
            f.wr_name.value = f.wr_name.value.replace(pattern, "");
            if (f.wr_name.value == '')
            {
                alert('未输入姓名.');
                f.wr_name.focus();
                return false;
            }
        }

        if (typeof(f.wr_password) != 'undefined')
        {
            f.wr_password.value = f.wr_password.value.replace(pattern, "");
            if (f.wr_password.value == '')
            {
                alert('未输入密码.');
                f.wr_password.focus();
                return false;
            }
        }

        f.token.value = generate_token();
        if (f.token.value == "") {
            alert("创建令牌失败.");
            return false;
        }

        // captcha 使用时
        if (typeof check_captcha === "function") {
            if (!check_captcha(f)) {
                return false;
            }
        }

        document.getElementById("btn_submit").disabled = true;

        return true;
    }

    function comment_box(comment_id, work)
    {
        var el_id,
            form_el = 'fviewcomment',
            respond = document.getElementById(form_el);

        // 当评论名称出现时回答, 校正
        if (comment_id) {
            if (work == 'c') {
                el_id = 'reply_' + comment_id;
            } else {
                el_id = 'edit_' + comment_id;
            }
            // 校正, 回答时, 请参阅 “取消” 按钮
            document.getElementById('btn_cancel').style.display = '';
        } else {
            el_id = 'bo_basic_comment_write';
            document.getElementById('btn_cancel').style.display = 'none';
        }

        if (save_before != el_id)
        {
            if (save_before)
            {
                document.getElementById(save_before).style.display = 'none';
            }

            document.getElementById(el_id).style.display = '';
            document.getElementById(el_id).appendChild(respond);
            //输入值初始化
            document.getElementById('wr_content').value = '';
            
            // 编辑评论
            if (work == 'cu')
            {
                document.getElementById('wr_content').value = document.getElementById('save_comment_' + comment_id).value;
                if (typeof char_count != 'undefined')
                    check_byte('wr_content', 'char_count');
                if (document.getElementById('secret_comment_'+comment_id).value)
                    document.getElementById('wr_secret').checked = true;
                else
                    document.getElementById('wr_secret').checked = false;
            }

            document.getElementById('comment_id').value = comment_id;
            document.getElementById('w').value = work;

            if(save_before)
                $("#captcha_reload").trigger("click");

            save_before = el_id;
        }
    }

    function comment_delete(href) {
        if (confirm("您要删除此评论吗?")) {
            token = generate_token();
            location.href = href + "?token=" + token + "&{{ request.query_params }}";
            return true;
        }
        return false;
    }

    comment_box('', 'c'); // 添加注释以处理要可见的表单 (root亲爱的)

    </script>
    {% endif %}

    <script>
    jQuery(function($) {
        //打开评论
        $(".comment_opener").click(function(e){
            e.preventDefault();
            $(this).toggleClass("cmt_btn_op");
            $(".bo_comment").toggle();
        });

        // 编辑评论, 取消答案
        $("#btn_cancel").click(function() {
            comment_box('', 'c');
        });
    });
    </script>
</div>

<script>
    function board_move(href, sw) {
        var f = document.fwrite_copy;
        var sub_win = window.open(href, "move", "left=50, top=50, width=500, height=550, scrollbars=1");

        f.sw.value = sw;
        f.target = "move";
        f.submit();
    }

    $(function() {
        // 图像调整大小
        $("#view_article").viewimageresize();

        // 待定, 非推荐
        $(".btn_react").click(function() {
            {% if not login_member: %}
                alert("登录后，请使用.");
                return false;
            {% endif %}

            $(".react_msg").stop().fadeOut()

            $(".btn_react").removeClass("active");

            var $tx = $(this).next(".react_msg");

            excute_good(this.href, $(this), $tx);
            return false;
        });
    });

    var isRun = true;
    function excute_good(href, $el, $tx) {
        token = generate_token();

        if (token) {
            $.ajax({
                type: "POST",
                url: href,
                data: {"token": token},
                dataType: "json",
                beforeSend: function() {
                    if (isRun == false) {
                        alert("这是一个不正常的要求. 请稍等。.")
                        return false;
                    }
                    isRun = false;
                },
                success: function(data) {
                    if (data.status == "success") {
                        $el.addClass("active");
                    }
                    $("#react_good").find("strong").text(number_format(data.good));
                    $("#react_nogood").find("strong").text(number_format(data.nogood));
                    $tx.text(data.message);
                    $tx.fadeIn(200).delay(2500).fadeOut(200);
                },
                error: function(xhr, status, error) {
                    // 消息输出
                    var message = xhr.responseJSON ? xhr.responseJSON.message : xhr.responseText;
                    alert(xhr.status + " 错误 - " + message);
                },
                complete: function() {
                    isRun = true;
                }
            });
        } else {
            alert("创建令牌失败.");
        }
    }
</script>

<form name="fwrite_copy" id="fwrite_copy" action="{{ url_for('move_post', bo_table=board.bo_table) }}" method="post">
    <input type="hidden" name="sw" value="">
    <input type="hidden" name="chk_wr_id[]" value="{{ write.wr_id }}">
</form>

{% if write_list %}
    {{ write_list|safe }}
{% endif %}
{% endblock content %}